import { reactive, toRefs } from 'vue'

import { getCity, getProvince } from '@/api/backend/dict'

export const useCity = () => {
  const state = reactive({
    provinceOptions: [],
    cityOptions: [],
    countyOptions: [],
  })

  const getProvinceOptions = async () => {
    const ret = await getProvince()
    state.provinceOptions = ret || []
  }

  const getCityOptions = async (code: string | number) => {
    const ret = await getCity(code)
    state.cityOptions = ret || []
  }

  const getCountyOptions = async (code: string | number) => {
    const ret = await getCity(code)
    state.countyOptions = ret || []
  }

  return {
    ...toRefs(state),
    getProvinceOptions,
    getCityOptions,
    getCountyOptions,
  }
}
